<template>
	<view>
		<u-popup :show="show1" mode="center" :round="20">
			<view class="serveBox" v-if="show1">
				<template v-if="title">
					<view class="serve_tit" style="margin-top: 30rpx;" v-if="ispublish">
						恭喜你，信息发布成功
					</view>
					<view class="serve_tit" style="color: #d3d3d3;font-size: 25rpx;margin: 16rpx 0;" v-if="ispublish">
						等待客服人员审核后，即可正常展示
					</view>
					<view style="height: 24rpx;width: 1rpx;" v-if="!ispublish"></view>
					<view class="serve_tit">
						开启信息置顶，享受信息超级曝光
					</view>
				</template>
				
				<template v-else>
					<view class="serve_tit" style="margin-top: 30rpx;">请选择置顶套餐</view>
				</template>
				
				<view class="tc-img">
					<image :src="oss(meal[0].image)" mode="aspectFill"></image>
				</view>
				<view class="serve_cont">
					<view style="min-width: 160rpx;text-align: center;border-radius: 20rpx;background-color: #FFF7F5;margin-left: 24rpx;border: 2px solid #FFF7F5;" v-for="(i,index) in meal" :class="{active: current === index}" @click="cutitem(index,i.id,i.num)">
						<view style="font-size: 26rpx;padding-top: 32rpx;">{{i.day}}天</view>
						<view style="font-size: 22rpx;color: #FC6605;padding-top: 16rpx;">￥ <text style="font-size: 36rpx;font-weight: 500;">{{i.num}}</text> <text v-if="i.original_num!=0" style="text-decoration: line-through;color: #aaa;">￥{{i.original_num}}</text> </view>
						<view style="height: 40rpx;width: 1rpx;"></view>
						<view style="background-color: #FF7A7A;color: #FFF;font-size: 24rpx;border-radius: 0 0 20rpx 20rpx;padding: 8rpx 0;"> 约{{i.day_num}}/天 </view>
					</view>
					
				</view>
				<view class="tc-btn-box">
					<view class="tc-btn1" @click="lastCkeck">购买置顶</view>
					<view class="tc-btn2" @click="guanbi">关闭</view>
				</view>
				<view style="height: 24rpx;width: 1rpx;"></view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		name:"topPopup",
		props:{
			show1: {
				type: Boolean,
				default:false
			},
			ispublish:{
				type: Number,
				default:1
			},
			title: {
				type: Boolean,
				default:true
			},
			// meal:{
			// 	type: Array,
			// 	default:[]
			// },
			meal:  { type: Array, default() { return [] } },
			// show1:'',
			// meal:[]
		},
		data() {
			return {
				current:'',
				itemid:''
			};
		},
		methods:{
			cutitem(i,id,num){
				this.current = i
				this.itemid = id
				this.money = num
			},
			guanbi(){
				this.show1 = false
				this.$emit('padlock')
			},
			lastCkeck(){
				this.$emit('ckeck',{id:this.itemid,money:this.money})
			}
		}
	}
</script>

<style lang="scss">
.serveBox {
				width: 690rpx;
				border-radius: 20rpx;

				.serve_tit {
					// margin-top: 30rpx;
					text-align: center;
					font-size: 36rpx;
					color: #333333;
					font-weight: bold;
					line-height: 40rpx;
				}
				
				.tc-img {
					width: 600rpx;
					margin: auto;
					margin-top:24rpx;
					image {
						width: 600rpx;
						height: 660rpx;
					}
				}
				
				.serve_cont {
					// margin: 0 30rpx;
					display: flex;
					// flex-wrap: wrap;
					// flex-direction: row;
					
					margin-top: 24rpx;
					overflow: hidden;
					overflow-x: auto;
					white-space: nowrap;
					.serve {
						margin: 30rpx 0;
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						padding: 16rpx 32rpx;
						margin-right: 20rpx;
						// width: 190rpx;
						// height: 200rpx;
						box-sizing: border-box;
						border-radius: 20rpx;
						border: 1rpx solid #989898;


						.serve_num {
							margin-bottom: 20rpx;
							font-size: 32rpx;
							font-weight: bold;
							color: #333;
							line-height: 45rpx;
						}

						.serve_hour {
							font-size: 28rpx;
							font-weight: 400;
							color: #323232;
							line-height: 40rpx;
						}
					}

					.active {
						// border: 1rpx solid #FFDF41;
						border: 2px solid #FF7A7A !important;
					}

				}
				
				.tc-btn-box {
					width: 560rpx;
					margin: auto;
					margin-top: 20rpx;
					display: flex;
					justify-content: space-between;
					.tc-btn1 {
						width: 220rpx;
						height: 80rpx;
						background-color: #FBBA45;
						border-radius: 10rpx;
						text-align: center;
						line-height: 80rpx;
					}
					.tc-btn2 {
						width: 220rpx;
						height: 80rpx;
						border-radius: 10rpx;
						text-align: center;
						line-height: 80rpx;
						background-color: #9A9A9A;
						color: #FFF;
					}
				}
			}
</style>